<template>
    <div class="content-wrap">
        <app-preview
            :appId="appId"
            :historyId="historyId"
            :pageId="pageId"
            class="preview-wrap"
        />
    </div>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AppPreview from '@/components/app-preview'
export default {
    name: 'preview',
    components: {
        AppPreview
    },
    setup() {
        const route = useRoute()

        const appId = computed(() => route.params.appId)
        const historyId = computed(() => route.query.historyId)
        const pageId = computed(() => route.query.pageId)

        return {
            appId,
            historyId,
            pageId
        }
    }
}
</script>

<style lang="less" scoped>
.content-wrap {
    width: 100%;
    height: 100%;
    background-color: var(--edit-bg-color);
    position: relative;
    .preview-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>